
<script src="personal-set.component.ts"></script>
<section class="vbox">
  <section>
    <section class="hbox stretch">
      <!-- .aside -->
      <!-- /.aside -->
      <section id="content">

        <img id="imgsrc" src="../../../assets/images/head.jpeg" style=" width: 100px;height:100px;" class="img-circle m-l-xl m-t-xl fl-l "/>
        <form  #personalsetFrom="ngForm"  (ngSubmit)="onSubmit(personalsetFrom,personalSetMessages)"  class="fl-l m-l-xl6 m-t-6" >


          <input input type="file" id="userimg" ng2FileSelect [uploader]="uploader"  (change)="selectedFileOnChanged()"  style="    opacity: 0;
    position: absolute;
    top: 42px;
    left: 38px;
    width: 100px;
    height: 100px;"/>

          <div class="form-group">
            <label >姓名</label>
            <input type="text" id="name" [(ngModel)]="personalSetMessages.name" name="name" #name="ngModel" class="form-control"   value="{{personalSetMessages.name}}"  data-required="true" required maxlength="10" minLength="4">
            <div [hidden]="name.valid " class="alert alert-danger">

              输入内容长度限制为4-10位

            </div>
          </div>


          <div class="form-group">
            <label>生日</label>

            <input type="data" id="birthday" class="form-control form_datetime" [(ngModel)]="personalSetMessages.birthday" name="birthday" #birthday="ngModel"   value="{{personalSetMessages.birthday}} "data-required="true"  onclick="WdatePicker()"  readonly>

          </div>
          <div class="form-group">

            <!--<select id="country" class="input-sm form-control input-s-sm inline v-middle" [(ngModel)]="personalSetMessages.country" name="country" #country="ngModel" (change)="SelectProvince(personalSetMessages.country)">-->


              <!--<option  [value]="中国"  selected="selected">中国</option>-->
            <!--</select>-->
            <select id="province"  class="input-sm form-control input-s-sm inline v-middle" [(ngModel)]="personalSetMessages.province" name="province" #province="ngModel" (change)="SelectCitys(personalSetMessages.province)">
              <option  *ngFor="let item of provinces"  value="{{item}}" >{{item}}</option>
              <option hidden="hidden" [value]='personalSetMessages.province' *ngIf="personalSetMessages" selected="selected">{{personalSetMessages.province}}</option>
            </select>
            <select id="city"  class="input-sm form-control input-s-sm inline v-middle" [(ngModel)]="personalSetMessages.city" name="city" #city="ngModel" (change)="SelectArea(personalSetMessages.city)">
              <option *ngFor="let item of citys" [value]='item'>{{item}}</option>
              <option hidden="hidden" [value]="personalSetMessages.city" *ngIf="personalSetMessages"selected="selected">{{personalSetMessages.city}}</option>
            </select>
            <select   id="area" class="input-sm form-control input-s-sm inline v-middle" [(ngModel)]="personalSetMessages.area" name="area" #area="ngModel">
              <option *ngFor="let item of areas" [value]='item'>{{item}}</option>
              <option hidden="hidden" [value]='personalSetMessages.area' *ngIf="personalSetMessages" selected="selected">{{personalSetMessages.area}}</option>
            </select>
          </div>
          <div class="form-group">
            <label>个人简介</label>
            <textarea id="profile" class="form-control" rows="6" cols="20"  [(ngModel)]="personalSetMessages.profile" name="profile" #profile="ngModel" data-required="true" placeholder="{{personalSetMessages.profile}}" placeholder="简单自我介绍"  ></textarea>

          </div>

          <footer class="panel-footer text-right bg-light lter" style="    position: relative;
    right: -104px;
    top: 13px;">
            <button type="submit" class="btn btn-success btn-s-xs">提交</button>
          </footer>
        </form>
      </section>
    </section>
  </section>
</section>
